<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子元素伪类选择器</title>
		<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

		<style type="text/css">
			ul{
				background-color: #f00;
				margin: 5px;
				border: 3px solid #000000;
			}
			ul>li{
				background-color: #0ff;
				margin: 5px;
				border: 3px solid #000000;
			}
			ul>div{
				background-color: #0f0;
				margin: 5px;
				border: 3px solid #000000;
			}
		</style>
	</head>
	<body>
  <!-- 		
		1）:first-child / :last-child, 元素，其地位是：第一子元素/倒数第一子元素
		2）:first-of-type / :last-of-type, 元素，其地位是：所有子元素中该类型的第一个、倒数第一个
		3）:nth-child() / :nth-last-child() , 元素，其地位是：第n子元素\倒数第n子元素
		4）:nth-type() / :nth-last-type(), 元素，其地位是：所有子元素中该类型的第n个\倒数第n个
		5）:only-child / :only-of-type ,  元素，其地位是：为一个子元素\唯一分该类型子元素
 -->
		<ul id="ul1">
			<li>1</li>
			<div>a</div>
			<li>2</li>
			<div>b</div>
			<li>3</li>
			<div>c</div>
			<li>4</li>
		</ul>
 
		<ul id='ul2'>
			<li>5</li>
			<div>d</div>
			<li>6</li>
			<div>e</div>
			<li>7</li>
			<div>f</div>
			<li>8</li>
		</ul>

		<ul>
			<li>9</li>
		</ul>
		
		<ul>
			<li>10</li>
			<div>g</div>
		</ul>
		
		<ul>
			<div>h</div>
		</ul>
		
		<ul>
			<div></div>
			<div id='d1'>
				<div id='d2'>
					<li>a</li>
				</div>
			</div>
			<li>hello kitty!</li>
		</ul>
	
		<script type="text/javascript">
			$(function(){
				
				// 知识点:
				// :first, 和前面选出来的集合有关,
				// :first-child, 和DOM tree中所处地位有关,与集合无关
				// :first-of-type, 和DOM tree中所处地位有关,与集合无关
				
				// 从1开始:nth-child(n)
				
				
				
				// 是否包含文本和元素 ==> 是否包含文本,是否包含元素
				
				// :empty, 其不包含文本,也不包含元素
				// $('ul>div:empty').html('hello ajax!');
				
				// :parent, 包含文本,或者包含元素
				// $('ul>div:parent').html("whfoxxx");//
				
				// :contains(text), 包含文本,疲惫自己的文本,也可以匹配自己的元素
				// $('div:contains(a)').css("background-color",'#ff0')
				
				// :has(selector) 含有可以匹配selector的子元素与元素
				// $('ul:has(div)').css("background-color",'#ff0');
				
				// 练习1: 找到所有不含li的ul.
				// $('ul:not(:has(li))').css('background-color','#ff0');
				
				// 练习2:找到所有含有div的ul,但是不包含li.
				$('ul:has(div):not(:has(li))').css('background-color','#ff0');
			});
		</script>
		
	/body>
</html>
